<template>
  <div class="person-main">
    <el-table :data="person_table" style="width: 100%;flex: 1;padding-bottom: 10px;" height="100%"
      :header-cell-style="header_cell_style" border>
      <el-table-column type="index" width="60" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="companyName" label="单位及部门" align="center" width="220">
      </el-table-column>
      <el-table-column label="值班长" align="center" class-name="p-t-2" width="340">
        <template slot-scope="scope">
          <ul class="persons">
            <li class="person-item" :class="selected_member1.id == item.id ? 'active' : ''"
              v-for="(item, i) in scope.row.member1" :key="i" @click="handlerMember1(item, scope.row, scope.$index)">
              {{ item.name }}
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column label="值班员" align="center" class-name="p-t-2">
        <template slot-scope="scope">
          <ul class="persons">
            <li class="person-item" :class="item.is_checked ? 'active' : ''" v-for="(item, i) in scope.row.member2"
              :key="i" @click="handlerMember2(item, scope.row, scope.$index)">
              {{ item.name }}
            </li>
          </ul>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { GetOrgTree } from "@/api/common.js";
import { getPersonListPage } from "@/api/duty/daily/plan.js";
export default {
  name: "Person",
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    operatorDuty: {
      type: Object,
      default: () => {
        return {
          dutyMember1: [],
          dutyMember2: []
        };
      }
    }
  },
  data() {
    return {
      unit_options: [],
      cascader_props: {
        expandTrigger: "hover",
        children: "children",
        label: "orgName",
        value: "orgCode",
        emitPath: false
        // checkStrictly: true
      },
      person_table: [],
      header_cell_style: {
        textAlign: "center",
        backgroundColor: "#B1C8F9",
        border: "1px solid #ccc",
        fontSize: "16px",
        color: "#333"
      },
      // 已选值班长
      selected_member1: {
        name: "",
        id: ""
      },
      // 已选值班员
      selected_member2: [],
      // 当前所选的表索引
      active_index: null,
      total: 0,
      is_default: false
    };
  },
  watch: {
    active_index(newVal, oldVal) {
      console.log("active_index", newVal, oldVal);
      // oldVal = oldVal || 0;
      if (newVal != oldVal) {
        // console.log(this.person_table[oldVal]);
        if (oldVal == null) {
          if (!this.is_default) {
            this.selected_member1 = { name: "" };
            this.person_table.forEach(item => {
              item.member2.forEach(item_c => {
                item_c.is_checked = false;
              });
            });
            this.selected_member2 = [];
            this.is_default = false;
          }
        } else {
          this.selected_member1 = { name: "" };
          this.person_table[oldVal].member2.forEach(item => {
            item.is_checked = false;
          });
          this.selected_member2 = [];
        }
      }
    },
    isShow: {
      handler(val) {
        if (val) {
          this.getOrgTree();
          this.getPersonList();
        } else {
          this.active_index = null;
          this.is_default = false;
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取单位组织结构树
    async getOrgTree() {
      this.unit_options = await GetOrgTree();
    },

    // 切换页码
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    async getPersonList() {
      const res = await getPersonListPage({ type: "0" });
      const persons = res.map(item => {
        let member1 = item.leaderList.length ? item.leaderList : []; // 值班长
        let member2 = item.staffList.length ? item.staffList : []; // 值班员
        member1 = member1.filter(item => !this.operatorDuty.dutyMember1.includes(item.id));
        member2 = member2.filter(item => !this.operatorDuty.dutyMember2.includes(item.id));
        // 值班员多选处理
        const multiple_member2 = member2.map(item => {
          return {
            ...item,
            is_checked: false
          };
        });
        return {
          companyName: item.companyName,
          member1,
          member2: multiple_member2
        };
      });
      this.person_table = persons;

      // 传值回显
      this.$nextTick(() => {
        const { member1: row_member1, member2: row_member2 } = this.row;
        // console.log(this.row);
        if (row_member1.name && row_member2.length) {
          this.selected_member2 = this.getSelected(row_member1, row_member2);
        }
      });
      // console.log(persons);
    },
    getSelected(row_member1, row_member2) {
      const selected_member2 = [];
      this.person_table.forEach((item, index) => {
        if (item.member1.length) {
          item.member1.forEach(item_child => {
            if (item_child.id == row_member1.id) {
              this.selected_member1 = item_child;
              this.is_default = true;
              this.active_index = index;
            }
          });
        }
        if (item.member2.length) {
          item.member2.forEach((item_child, i) => {
            if (row_member2.map(item => item.id).includes(item_child.id)) {
              // console.log(i);
              item_child.is_checked = true;
              selected_member2.push(item_child);
            }
          });
        }
      });
      return selected_member2;
    },
    // 选择人员1(值班长)
    handlerMember1(item, row, index) {
      // console.log(item);
      this.active_index = index;
      this.$nextTick(() => {
        const flag = this.selected_member2.some(n => n.name == item.name);
        if (flag) return this.$message({ message: "同一班次值班长和值班员不能为同一人", type: "warning" });
        this.selected_member1 = item;
      });
    },
    // 选择人员2(值班员多选)
    handlerMember2(item, row, index) {
      const { is_checked } = item;
      this.active_index = index;

      this.$nextTick(() => {
        if (this.selected_member1.name == item.name) return this.$message({ message: "同一班次值班长和值班员不能为同一人", type: "warning" });
        item.is_checked = !is_checked;
        this.handleSelectedMember2(row);
      });
    },
    // 处理已选值班员
    handleSelectedMember2(row) {
      const { member2 } = row;
      this.selected_member2 = member2.filter(item => item.is_checked).map(item => {
        return {
          name: item.name,
          id: item.id
        };
      });
    },
    // 重置已选
    resetSelect() {
      this.selected_member1 = { name: "", id: "" };
      this.selected_member2 = [];
      this.person_table.forEach(item => {
        item.member2.forEach(item_c => {
          item_c.is_checked = false;
        });
      });
    }
    // 排班计划表日期合并
    // dateRowMerge ({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     const _row = this.rowMerge(this.table, "date")[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;

    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    // },
    // 合并操作
    // rowMerge (data, field) {
    //   const spanArr = [];
    //   let pos = 0;
    //   for (let i = 0; i < data.length; i++) {
    //     if (i == 0) {
    //       spanArr.push(1);
    //       pos = 0;
    //     } else if (data[i][field] === data[i - 1][field]) {
    //       spanArr[pos] += 1;
    //       spanArr.push(0);
    //     } else {
    //       spanArr.push(1);
    //       pos = i;
    //     }
    //   }
    //   return spanArr;
    // }
  }
};
</script>

<style lang='less' scoped>
:deep(.el-button--small) {
  padding: 7px 15px;
}

.person-main {
  height: 100%;
  display: flex;
  flex-direction: column;

  .btns {
    text-align: center;
  }
}

.persons {
  text-align: left;

  .person-item {
    display: inline-block;
    padding: 3px 15px;
    color: #333;
    border: 1px solid #d9d9d9;
    font-size: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 10px;
    cursor: pointer;

    &+.person-item {
      margin-left: 10px;
    }
  }

  .active {
    background-color: #b1c8f9;
  }
}

:deep(td.p-t-2) {
  padding-top: 2px;
}
</style>
